<template>
    <el-card class="box-card m_t_b_10px" shadow="hover">
        <div slot="header" class="title">咨询师</div>
        <div class="course_panel_psy" style="padding-bottom: 20px;">
            <div class="item" v-for="item in list">
                <el-avatar class="avatar" :src="item.pic" />
                <div class="course_body">
                    <p class="title">{{item.name}}</p>
                    <p class="p_top introduction">{{item.personalInfo}}</p>
                    <p class="p_top">
                        <el-button type="primary" size="small" @click="personalHome(item.id)">个人详情</el-button>
                        <el-button type="primary" size="small" @click="changeIsOnLine(item.id)">离线咨询</el-button>
                    </p>
                </div>
            </div>
        </div>
        <el-pagination @size-change="sizeChange" @current-change="pageChange" :current-page="page.page" :page-sizes="[1, 5, 10, 20, 30, 40, 50]" :page-size="page.size" :layout="PAGE_LAYOUT" :total="page.total"></el-pagination>
        
        <el-dialog title="离线咨询" :visible.sync="isOnLine">
            <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 20}" placeholder="请输入内容" v-model="textarea"></el-input>
            <div class="m_t_15" style="text-align: right">
                <el-button type="primary">提交</el-button>
            </div>
        </el-dialog>
    </el-card>
</template>

<script>

export default {
    data() {
        return {
            isOnLine: false,
            textarea: '',
            page: { pageNumber: 1, pageSize: 10, total: 4 },
            list: []
        };
    },
    created() {
        this.getConsultant()
    },
    mounted() {},
    methods: {
        getConsultant() {
            utils.post(utils.api.psychological.consultant, this.page, (res) => {
                this.list = res.rows
                this.page.total = res.total
            })
        },
        sizeChange(size) {
            this.page.pageSize = size
            this.getConsultant()
        },
        pageChange(page) {
            this.page.pageNumber = page
            this.getConsultant()
        },
        changeIsOnLine() {
            this.isOnLine = true;
        },
        personalHome(id) {
            this.$router.push({ path: '/LearningHome/Psychological/PersonalProfile', query: { id } });
        }
    }
};
</script>

<style  lang="less">
</style>